<template>
  <div>
    <!-- 👎动态style -->
    <!-- 语法: style="{css属性名： 'css属性值'}" -->
    <!-- 注意：css属性名连字符 -> 小驼峰 或者 'xxx-xx' -->
    <div
      :style="{
        color: txtColor,
        backgroundColor: 'green',
        'font-size': '50px',
        fontWeight: 700,
      }"
    >
      我爱Vue
    </div>
    <button @click="txtColor = 'red'">点我高亮</button>
    <hr />

    <!-- 动态class👍 -->
    <!-- 语法： :class="{类名: 布尔值}" 为true添加类名， 为false去掉类名 -->
    <!-- 注意： 1. 类名不会自动驼峰转连字符 -->
    <!-- 注意： 2. :class和class可以共存 -->
    <div class="box-big" :class="{ box: highlight, xxXXx: trues }">
      动态class
    </div>
    <button @click="highlight = !highlight">点我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      txtColor: "",
      highlight: false,
    };
  },
};
</script>

<style>
.box {
  color: lime;
  background-color: pink;
}

.boxBig {
  font-size: 50px;
}
.box-big {
  font-size: 50px;
}
</style>
